<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Athena 项目 - 测试覆盖率报告</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        },
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'gradient-flow': 'gradient-flow 8s ease-in-out infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
                        'bounce-scale': 'bounce-scale 0.6s ease-in-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        'gradient-flow': {
                            '0%': { 'background-position': '0% 50%' },
                            '50%': { 'background-position': '100% 50%' },
                            '100%': { 'background-position': '0% 50%' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0px) scale(1)' },
                            '50%': { transform: 'translateY(-10px) scale(1.05)' },
                        },
                        'glow-pulse': {
                            '0%, 100%': { 'box-shadow': '0 0 5px rgba(59, 130, 246, 0.3)' },
                            '50%': { 'box-shadow': '0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4)' },
                        },
                        'bounce-scale': {
                            '0%, 100%': { transform: 'scale(1)' },
                            '50%': { transform: 'scale(1.05)' },
                        },
                    },
                },
            },
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 300% 300%;
            animation: gradient-flow 8s ease-in-out infinite;
        }
        
        .glass-effect {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .dark .glass-effect {
            background: rgba(17, 24, 39, 0.95);
            border: 1px solid rgba(75, 85, 99, 0.2);
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .progress-bar {
            background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center p-4 transition-all duration-300">
    <!-- 主容器 -->
    <div class="glass-effect rounded-3xl shadow-2xl p-8 max-w-6xl w-full animate-fade-in">
        <!-- 顶部导航栏 -->
        <div class="flex justify-between items-center mb-8">
            <div class="flex items-center space-x-4">
                <div class="text-5xl animate-float">🏛️</div>
                <div>
                    <h1 class="text-3xl font-bold text-gradient">Athena 项目</h1>
                    <p class="text-gray-600 dark:text-gray-300">测试覆盖率报告 & 项目文档</p>
                </div>
            </div>
            <button id="darkModeToggle" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-300 animate-glow-pulse">
                <span class="text-xl">🌙</span>
            </button>
        </div>

        <!-- 统计卡片网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 测试用例卡片 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-slide-up border-l-4 border-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">30</div>
                        <div class="text-gray-600 dark:text-gray-300 text-sm font-medium">测试用例</div>
                    </div>
                    <div class="text-3xl opacity-60">🧪</div>
                </div>
                <div class="mt-3 flex items-center">
                    <div class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full text-xs font-medium">
                        ✅ 全部通过
                    </div>
                </div>
            </div>

            <!-- 代码覆盖率卡片 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-slide-up border-l-4 border-red-500">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-bold text-red-600 dark:text-red-400">11.34%</div>
                        <div class="text-gray-600 dark:text-gray-300 text-sm font-medium">代码覆盖率</div>
                    </div>
                    <div class="text-3xl opacity-60">📊</div>
                </div>
                <div class="mt-3">
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="bg-red-500 h-2 rounded-full" style="width: 11.34%"></div>
                    </div>
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">265/2336 lines</div>
                </div>
            </div>

            <!-- 测试模块卡片 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-slide-up border-l-4 border-purple-500">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">5</div>
                        <div class="text-gray-600 dark:text-gray-300 text-sm font-medium">测试模块</div>
                    </div>
                    <div class="text-3xl opacity-60">📦</div>
                </div>
                <div class="mt-3 flex items-center">
                    <div class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 px-2 py-1 rounded-full text-xs font-medium">
                        🔧 Components, Hooks, Islands...
                    </div>
                </div>
            </div>

            <!-- 测试通过率卡片 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-slide-up border-l-4 border-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-bold text-green-600 dark:text-green-400">100%</div>
                        <div class="text-gray-600 dark:text-gray-300 text-sm font-medium">测试通过率</div>
                    </div>
                    <div class="text-3xl opacity-60">✅</div>
                </div>
                <div class="mt-3">
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
                    </div>
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">30/30 通过</div>
                </div>
            </div>
        </div>

        <!-- 覆盖率警告 -->
        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-2xl p-6 mb-8">
            <div class="flex items-start space-x-4">
                <div class="text-2xl">⚠️</div>
                <div>
                    <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200 mb-2">覆盖率提醒</h3>
                    <p class="text-amber-700 dark:text-amber-300">
                        当前代码覆盖率为 <span class="font-bold">11.34%</span>，建议增加更多测试用例以提高代码质量和可靠性。
                    </p>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 px-3 py-1 rounded-full text-sm">
                            🎯 目标: >80%
                        </span>
                        <span class="bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 px-3 py-1 rounded-full text-sm">
                            📈 当前: 11.34%
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模块覆盖率详情 -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-8 shadow-lg">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
                <span class="text-2xl mr-3">📊</span>
                模块覆盖率详情
            </h3>
            
            <div class="space-y-4">
                <!-- Components -->
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🧩</span>
                        <span class="font-medium text-gray-800 dark:text-gray-200">Components</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="w-32 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                            <div class="bg-red-500 h-2 rounded-full" style="width: 7.06%"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">7.06% (48/680)</span>
                    </div>
                </div>

                <!-- Hooks -->
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🪝</span>
                        <span class="font-medium text-gray-800 dark:text-gray-200">Hooks</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="w-32 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                            <div class="bg-red-500 h-2 rounded-full" style="width: 4.95%"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">4.95% (15/303)</span>
                    </div>
                </div>

                <!-- Islands -->
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🏝️</span>
                        <span class="font-medium text-gray-800 dark:text-gray-200">Islands</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="w-32 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                            <div class="bg-orange-500 h-2 rounded-full" style="width: 14.22%"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">14.22% (161/1132)</span>
                    </div>
                </div>

                <!-- Stores -->
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🗄️</span>
                        <span class="font-medium text-gray-800 dark:text-gray-200">Stores</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="w-32 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 18.40%"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">18.40% (39/212)</span>
                    </div>
                </div>

                <!-- Utils -->
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                    <div class="flex items-center space-x-3">
                        <span class="text-xl">🔧</span>
                        <span class="font-medium text-gray-800 dark:text-gray-200">Utils</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="w-32 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: 22.22%"></div>
                        </div>
                        <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">22.22% (2/9)</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
            <a href="./html/index.html" id="coverageBtn" class="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-lg flex items-center justify-center space-x-2 animate-glow-pulse">
                <span class="text-xl">📊</span>
                <span>查看详细覆盖率报告</span>
            </a>
            <a href="https://athena.deno.dev/" class="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-lg flex items-center justify-center space-x-2">
                <span class="text-xl">🌐</span>
                <span>查看项目演示</span>
            </a>
        </div>

        <!-- 底部信息 -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <span class="text-xl">🚀</span>
                        <span class="text-gray-600 dark:text-gray-300">由 <strong>Deno</strong> + <strong>Fresh</strong> 驱动</span>
                    </div>
                    <div class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-3 py-1 rounded-full text-sm font-medium">
                        ✨ 自动更新
                    </div>
                </div>
                <div class="text-center md:text-right">
                    <p class="text-gray-600 dark:text-gray-300">
                        最后更新: <span id="lastUpdate" class="font-mono text-sm"></span>
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        Generated by Deno v2.3.6 | 总计: 265/2336 lines covered
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 暗色模式切换
        const darkModeToggle = document.getElementById('darkModeToggle');
        const html = document.documentElement;
        
        // 检查本地存储的主题设置
        const currentTheme = localStorage.getItem('theme') || 'light';
        if (currentTheme === 'dark') {
            html.classList.add('dark');
            darkModeToggle.innerHTML = '<span class="text-xl">☀️</span>';
        }
        
        darkModeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            const isDark = html.classList.contains('dark');
            darkModeToggle.innerHTML = isDark ? '<span class="text-xl">☀️</span>' : '<span class="text-xl">🌙</span>';
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        });

        // 设置最后更新时间
        document.getElementById('lastUpdate').textContent = new Date().toLocaleString('zh-CN');
        
        // 检查覆盖率报告是否存在
        const coverageBtn = document.getElementById('coverageBtn');
        fetch('./html/index.html')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Report not found');
                }
            })
            .catch(() => {
                coverageBtn.innerHTML = '<span class="text-xl">⚠️</span><span>覆盖率报告生成中...</span>';
                coverageBtn.className = coverageBtn.className.replace('from-blue-500 to-purple-600', 'from-amber-500 to-orange-600');
                coverageBtn.onclick = function(e) {
                    e.preventDefault();
                    alert('覆盖率报告正在生成中，请稍后刷新页面查看。\n\n提示：运行 `deno task test:coverage` 生成详细报告。');
                };
            });

        // 添加页面加载动画
        window.addEventListener('load', () => {
            document.body.classList.add('animate-fade-in');
        });

        // 添加鼠标跟随效果（可选）
        document.addEventListener('mousemove', (e) => {
            const cursor = document.querySelector('.cursor');
            if (cursor) {
                cursor.style.left = e.clientX + 'px';
                cursor.style.top = e.clientY + 'px';
            }
        });
    </script>
</body>
</html> 
